<template>
	<view class="" style="z-index: 500">
		<!-- aniosheight -->
		<view
			class="bar-view"
			:style="{
				'justify-content': 'center',
				'padding-top': zhuangtai + 'px',
				background: background,
				'padding-left': padding,
				'padding-right': padding
			}"
		>
			<view class="flex-al-center" :style="{ height: aniosheight + 'px' }">
				<view class="icon-view" v-if="showBtn">
					<view class="icon-back" @click="nav_back">
						<image v-if="nav_btn == 'back' || nav_btn == 'all'" class="back-icon" :src="auto_img"></image>
					</view>
					<!-- <image @click="nav_index" v-if="nav_btn == 'index' || nav_btn == 'all'" name="home" class="index-icon" :color="color"></image> -->
				</view>
				<view class="location s32 familytow fblod" v-if="showLocation" @click="onLocation">
					<view style="width: 100rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
						{{ positionText }}
					</view>
					<view class="xia_box"></view>
				</view>
				<!-- <view class="icon-view position_txt" :style="{'color':colorPosition}">
					<view class="txt">
						{{positionText}}
					</view>
				</view> -->
				<view class="bar-title" v-if="title.length" :style="{ color: color, left: left, 'font-family': family }">
					{{ title }}
				</view>
				<!-- <uni-data-picker class="pick_title" v-if="showPicker" :localdata="list" :placeholder="placeholder"
					:popup-title="placeholder" @change="onchange" @nodeclick="onnodeclick">
				</uni-data-picker> -->
				<picker @change="bindPickerChange" v-if="showPicker" :value="index" :range="list" range-key="shopname" style="width: 100%">
					<view class="uni-input" style="display: flex; align-items: center; justify-content: center; font-size: 28rpx; white-space: nowrap" v-if="list.length">
						{{ list[index].shopname.length > 9 ? list[index].shopname.slice(0, 9) + '…' : list[index].shopname }}
						<view
							class=""
							style="
								border-left: 14rpx solid transparent;
								border-right: 14rpx solid transparent;
								border-top: 16rpx solid #333333;
								border-bottom: 16rpx solid transparent;
								margin-top: 16rpx;
								margin-left: 8rpx;
							"
						>
							<!-- <image style="background: red;" src="" mode=""></image> -->
						</view>
					</view>
				</picker>
				<!-- <view class="bottom_icon"></view> -->
				<view class="goods_detail_nav flex" v-if="showGoodsNav">
					<view class="time_img" v-if="imgType">
						<image class="w100 h100" src="../static/time.png" mode=""></image>
					</view>
					<view class="status_txt fblod familytow">
						{{ state }}
					</view>
				</view>
				<!-- 头部导航栏 -->
				<view class="share flex" v-if="showShare">
					<input
						class="input_nav"
						type="text"
						v-model="iptVal"
						placeholder-class="s24 family f500"
						@blur="blur"
						:placeholder="placeholder"
						@input="changeInputValue"
						@focus="focus"
						placeholder-style="color:#ccc;"
					/>
					<view class="share_icon">
						<image class="w100 h100" src="../static/share_icon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view :style="{ height: zhuangtai + aniosheight + 'px', width: '100%' }"></view>
	</view>
</template>

<script>
export default {
	name: 'navBar',
	props: {
		title: {
			default: '',
			type: String
		},
		color: {
			default: '#FFFFFF',
			type: String
		},
		record: {
			default: 0,
			type: Number
		},
		placeholder: {
			default: '',
			type: String
		},
		positionText: {
			default: '',
			type: String
		},
		colorPosition: {
			default: '#FFFFFF',
			type: String
		},
		background: {
			default: 'rgba(0,0,0,0)',
			type: String
		},
		type: {
			default: '',
			type: String
		},
		nav_btn: {
			default: 'none',
			type: String
		},
		showtitle: {
			default: true,
			type: Boolean
		},
		auto_img: {
			default: '',
			type: String
		},
		family: {
			default: 'PingFang SC-Medium, PingFang SC',
			type: String
		},
		showBtn: {
			default: true,
			type: Boolean
		},
		list: {
			default: [],
			type: Array
		},
		placeholder: {
			default: '',
			type: String
		},
		showPicker: {
			default: false,
			type: Boolean
		},
		showGoodsNav: {
			default: false,
			type: Boolean
		},
		showShare: {
			default: false,
			type: Boolean
		},
		state: {
			default: '',
			type: String
		},
		imgType: {
			default: false,
			type: Boolean
		},
		showLocation: {
			default: false,
			type: Boolean
		},
		keyWord: {
			default: '',
			type: String
		},
		index: {
			default: 0,
			type: Number
		},
		shopId: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			padding: 0,
			zhuangtai: 0,
			aniosheight: 0,
			is_iphone: false,
			left: '46%',
			iptVal: '',
			goodsList: []
		};
	},
	created() {
		let that = this;
		let system = uni.getSystemInfoSync();
		let phone = system.model.split('');
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.padding = system.windowWidth - menuButtonInfo.right + menuButtonInfo.width + 'px';
		that.zhuangtai = system.statusBarHeight;
		if (phone[0] == 'iPhone') {
			that.is_iphone = true;
			that.aniosheight = 44;
		} else {
			that.aniosheight = 48;
		}
		that.$nextTick(function () {
			that.left = that.nav_btn != 'all' ? '40px' : '66px';
		});
	},
	mounted() {},
	methods: {
		changeInputValue(e) {
			this.$emit('inputMethods', e);
		},
		bindPickerChange: function (e) {
			// this.index = e.detail.value;
			// this.$emit('onPicker', this.index);
			this.$emit('onPicker', e.detail.value);
		},
		blur(keyword) {
			let that = this;
			if (that.record == 1) {
				that
					.$request({
						url: 'product/lists',
						method: 'POST',
						data: {
							keywords: that.iptVal
						}
					})
					.then((res) => {
						if (res.data.code == 1) {
							this.$store.commit('getScreen', res.data.data.data);
							uni.navigateTo({
								url: '/pages/filePages/search_list/search_list?keyword=' + that.iptVal + '&shopId=' + this.shopId
							});
						}
					});
			}
		},
		focus() {
			let that = this;
			if (that.record == 2) {
				uni.navigateBack();
			}
		},
		nav_back() {
			if (this.type == 'two') {
				uni.switchTab({
					url: '/pages/shopping/shopping'
				});
			} else if (this.type == '2') {
				uni.switchTab({
					url: '/pages/shopping/shopping'
				});
			} else if (this.type == '3') {
				uni.navigateTo({
					url: '/pages/filePages/administration/administration'
				});
			} else {
				uni.navigateBack({});
			}
		},
		nav_index() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		onLocation() {
			uni.navigateTo({
				url: '/pages/filePages/onLocation/onLocation'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bar-view {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	width: 750upx;
	top: 0;
	left: 0;
	z-index: 99;
	box-sizing: border-box;

	.flex-al-center {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;

		.pick_title {
			font-size: 28upx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;

			/deep/ .selected-area {
				font-size: 28upx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		}

		.bottom_icon {
			width: 16upx;
			height: 12upx;
			background-image: url('');
			background-size: 100% 100%;
			margin-left: 8upx;
		}

		.goods_detail_nav {
			.time_img {
				width: 46upx;
				height: 46upx;
				margin-top: 10upx;
				margin-left: -16upx;
				margin-right: 16upx;
			}

			.status_txt {
				font-size: 44upx;
				color: #ffffff;
			}
		}

		.share {
			margin-left: -120upx;

			.input_nav {
				width: 366upx;
				height: 64upx;
				background: #f4f5f9;
				border-radius: 32upx;
				padding-left: 74upx;
			}

			.share_icon {
				width: 32rpx;
				height: 30rpx;
				margin-top: 15rpx;
				position: absolute;
				left: 126rpx;
			}
		}
	}

	.bar-title {
		width: 100%;
		z-index: 105;
		font-size: 30upx;
		font-weight: 500;
		z-index: 105;
		left: 200upx;
		text-align: center;
	}

	.location {
		position: absolute;
		left: 30upx;
		z-index: 105;
		display: flex;
		height: 50upx;
		display: flex;
		align-items: center;
		width: 200upx;
		color: #ffffff;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		.xia_box {
			width: 40rpx;
			height: 30rpx;
			background-image: url('');
			background-size: 100% 100%;
		}
	}

	.icon-view {
		position: absolute;
		left: 30upx;
		z-index: 105;
		display: flex;
		height: 50upx;
		display: flex;
		align-items: center;
		width: 80upx;

		.index-icon {
			width: 30upx;
			height: 30upx;
		}

		.icon-back {
			width: 100%;
			height: 50upx;
			display: flex;
			align-items: center;

			.back-icon {
				width: 36upx;
				height: 36upx;
				margin-right: 30upx;
			}
		}
	}

	.screen_box {
		width: 406upx;
		height: 64upx;
		background: #f4f4f4;
		border-radius: 32upx;
		margin-left: -120upx;
		padding-left: 34upx;
	}

	.position_txt {
		font-size: 32upx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ffffff;

		.img {
			width: 12upx;
			height: 10upx;
			position: relative;
			top: -21upx;
			left: 4upx;
		}
	}
}
</style>
